<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js"></script>
    <script
      src="//cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js"
      charset="utf-8"
    ></script>
    <script
      src="//cdn.jsdelivr.net/npm/xgplayer-hls/dist/index.min.js"
      charset="utf-8"
    ></script>
    <title>Document</title>
  </head>
  <body>
    <div>
      <h2>腾讯云</h2>
      <div id="cloud-video-container"></div>
      <br />
      <h2>西瓜</h2>
      <div id="mse"></div>
    </div>
  </body>
</html>

<script>
  function getParams(name) {
    const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

    const r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return decodeURIComponent(r[2]);
    }
    return null;
  }
  function getPathParams() {
    const path = location.pathname.split("/");
    if (path[1] == "vod-player") {
      return {
        path: location.origin + path.slice(0, 4).join("/"),
        appid: path[2],
        fileid: path[3],
      };
    } else {
      return null;
    }
  }

  const rtmp = getParams("rtmp"),
    flv = getParams("flv"),
    livePath = getParams("url"),
    mp4 = getParams("mp4"),
    live = getParams("live") == "true" ? true : false,
    coverpic = getParams("coverpic"),
    width = getParams("width"),
    height = getParams("height"),
    volume = getParams("volume"),
    flash = getParams("flash") == "true" ? true : false,
    x5_player = getParams("x5_player") == "false" ? false : true,
    h5_flv = getParams("h5_flv") == "true" ? true : false,
    autoplay = getParams("autoplay") == "true" ? true : false,
    flashUrl = (function () {
      const params = getPathParams();
      if (params) {
        return params.path + "/player/release/QCPlayer.swf";
      }
      return "//imgcache.qq.com/open/qcloud/video/player/release/QCPlayer.swf";
    })(),
    log = getParams("log");
  /**
   * 视频类型播放优先级
   * mobile ：m3u8>mp4
   * PC ：RTMP>flv>m3u8>mp4
   */

  const options = {
    m3u8: livePath,
    autoplay: autoplay,
    live: live,
    width: width || "480",
    height: height || "320",
    volume: volume || 0.5,
    flash: flash,
    flashUrl: flashUrl,
    x5_player: x5_player,
    h5_flv: h5_flv,
    wording: {
      2032: "请求视频失败，请检查网络",
      2048: "请求m3u8文件失败，可能是网络错误或者跨域问题",
    },
    listener: function (msg) {},
  };
  window["tcplayer"] = new TcPlayer("cloud-video-container", options);

  const HlsPlayer = window["HlsPlayer"];
  const player = new HlsPlayer({
    id: "mse",
    url: livePath,
    isLive: true,
    autoplay: true,
    playsinline: true,
    height: 400,
    width: 260,
  });
</script>
